<template>
  <div class="HomeBrand">
    <div class="HomeBrand-header">
      <div class="HomeBrand-header-content">
        <div class="HomeBrand-header-content-img">
          <img src="/img/pinpai_banner.jpg" />
        </div>
      </div>
      <div class="HomeBrand-body">
        <div class="HomeBrand-body-img-list">
          <div class="brand-img-1">
            <img data-src="/img/p1.jpg" />
          </div>
          <div class="brand-img-2">
            <img data-src="/img/p2.jpg" />
          </div>
          <div class="brand-img-3">
            <img src="/img/p3.jpg" />
          </div>
        </div>
        <div
          class="HomeBrand-body-img-list2"
          v-for="(item) in brandList"
          :key="item.id"
          :style="'background: url('+item.bg+') no-repeat center top;'"
        >
          <div class="brand-img-body-header">
            <div class="brand-img-5">
              <img v-bind:data-src="item.img1" />
            </div>
            <div class="brand-img-6">
              <img v-bind:data-src="item.img2" />
            </div>
            <div class="brand-img-7">
              <img v-bind:data-src="item.img3" />
            </div>
            <div class="brand-img-8">
              <img v-bind:data-src="item.img4" />
            </div>
            <div class="brand-img-9">
              <img v-bind:data-src="item.img5" />
            </div>
            <div class="brand-img-10">
              <img v-bind:data-src="item.img6" />
            </div>
          </div>
          <div class="brand-img-body-content">
            <div class="brand-img-11">
              <img v-bind:data-src="item.img7" />
            </div>
            <div class="brand-img-12">
              <img v-bind:data-src="item.img8" />
            </div>
            <div class="brand-img-13">
              <img v-bind:data-src="item.img9" />
            </div>
            <div class="brand-img-14">
              <img v-bind:data-src="item.img10" />
            </div>
            <div class="brand-img-10">
              <img v-bind:data-src="item.img11" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHomeBrand } from "../../ajax/index";
export default {
  data() {
    return {
      imgLength: null,
      imgList: null,
      imgindex: 0,
      domHome: "",
      brandList: []
    };
  },
  methods: {
    lazyload(event) {
      var seeHeight = this.domHome.clientHeight; //可见区域高度
      var scrollTop = this.domHome.scrollTop; //滚动条距离顶部高度
      for (var i = this.imgindex; i < this.imgLength; i++) {
        if (
          this.imgList[i].offsetTop < seeHeight + scrollTop &&
          this.imgList[i].offsetTop > scrollTop
        ) {
          if (this.imgList[i].getAttribute("src") == null) {
            (function(i) {
              this.imgList[i].src = this.imgList[i].getAttribute("data-src");
              this.imgList[i].style.animationDuration = "2s";
              $(this.imgList[i]).addClass("animated  bounceInUp");
            }.call(this, i));
            // $(this.imgList[i]).addClass()
          }
          // this.imgindex = i + 1;
        }
      }
    },
    throttle(fun, delay, time) {
      var timeout,
        startTime = new Date();
      return function() {
        var context = this,
          args = arguments,
          curTime = new Date();
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= time) {
          fun.apply(context, args);
          startTime = curTime;
          // 没达到触发间隔，重新设定定时器
        } else {
          timeout = setTimeout(fun, delay);
        }
      };
    },
    getHomeBrand() {
      getHomeBrand()
        .then(result => {
          if (result.code) {
            this.brandList = result.data;
          }
        })
        .catch(err => {});
    }
  },
  mounted() {},
  created() {
    this.getHomeBrand();
  },
  watch: {
    brandList() {
      this.$nextTick(() => {
        this.imgLength = document.querySelectorAll(".HomeBrand img").length;
        this.imgList = document.querySelectorAll(".HomeBrand img");
        this.domHome = $("#scroll")[0];
        this.domHome.addEventListener(
          "scroll",
          this.throttle(this.lazyload, 500, 1000)
        );
      });
    }
  }
};
</script>

<style lang='scss'>
.HomeBrand {
  font-size: 0px;
  .HomeBrand-header {
    .HomeBrand-header-content {
      .HomeBrand-header-content-img {
        font-size: 0px;
        width: 100%;
      }
    }
  }
  .HomeBrand-body {
    .HomeBrand-header-content-img-list {
      min-height: 100vh;
      font-size: 0px;
    }
    .HomeBrand-body-img-list2 {
      min-height: 100vh;
      width: 100%;
      overflow: hidden;

      .brand-img-body-header {
        width: 1300px;
        margin: auto;
        margin-top: 635px;
        overflow: hidden;
        .brand-img-5 {
          padding-top: 125px;
          display: inline-block;
          margin-right: 10px;
        }
        .brand-img-6 {
          display: inline-block;
        }
        .brand-img-7 {
          margin-top: 10px;
          margin-bottom: 10px;
        }
        .brand-img-8 {
          display: inline-block;
          margin-right: 10px;
        }
        .brand-img-9 {
          display: inline-block;
        }
        .brand-img-10 {
          text-align: center;
          padding: 45px 0;
        }
      }
      .brand-img-body-content {
        width: 100vw;
        margin: auto;
        overflow: hidden;
        .brand-img-11 {
          display: inline-block;
          width: 50%;
        }
        .brand-img-12 {
          display: inline-block;
          width: 50%;
        }
        .brand-img-13 {
          display: inline-block;
          width: 50%;
        }
        .brand-img-14 {
          display: inline-block;
          width: 50%;
        }
        .brand-img-10 {
          text-align: center;
          padding: 45px 0;
        }
      }
    }
  }
}
</style>